<template>
	<!--:class="{column:isColums}"  绑定common.css中的样式column，true显示，false不显示样式-->
	<view class="couse-item" :class="{column:isColums}">
		<view class="item-left">
			<!-- lazy-load懒加载 异步加载 -->
			<image :src="item.mainImage" class="couse-img" lazy-load></image>
			<view class="course-time">
				{{item.totalTime}}
				
			</view>
		</view>
		<view class="item-right column">
			<view class="title">{{item.title}}</view>
			<view class="info">
				<view class="nickName iconfont icon-laoshi2">{{item.nickName}} </view>
				<view class="count">
					<!-- item.isFree当isFree为0则这个为true，免费显示出来 -->
					<view class="money" v-if="item.isFree">免费</view> 
					<view   v-else class="money iconfont icon-moneybag">
						{{item.priceDiscount||item.priceOriginal}}
						</view>
						<!-- item.priceDiscount如果有值就显示,没有就显示折扣价 -->
					<view class="iconfont icon-video"> {{item.studyTotal}} 人在学</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 是否纵向排列文字，（true纵向，false 横向） 
			isColums: {
				type: Boolean,
				default: false
			},
			item: {
				type: Object,
				// 如果返回是对象，则用箭头函数 es6中的语法
				default: () => ({
					id: 1,
					mainImage: "../../static/images/banner2.jpg",
					
					totalTime: '00:59:38',
					title: 'uniApp学习教程',
					nickName: 'Tony老师',
					isFree: 0 ,// 是否收费 0是免费。1是收费
					priceOriginal:999,
					priceDiscount:199,//优惠价
					studyTotal:999

				})
			}
		}

	}
</script>

<style lang="scss">
	// flex-direction: column纵向排列
	.couse-item {
		display: flex;
		// flex-direction: column;//纵向排列
		// 相对于父类元素定位，父类要加上 position relative
		flex-direction: column;
		width: 100%;
		height: 200rpx;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #F1f1f1; //添加一个下划线

		// item-left左边图片的样式
		.item-left {
			position: relative;
			width: 290rpx;
			height: 160rpx;
			margin-right: 20rpx;

			.couse-img {
				width: 290rpx;
				height: 160rpx;
				border-radius: 10rpx;
			}

			// 有了父元素的position: relative;，子元素的 position: absolute;相对于父元素的宽高
			.course-time {
				position: absolute;
				bottom: 5rpx;
				right: 5rpx;
				font-size: 22rpx;
				color: #FFFFFF;
				background: rgba(51, 51, 51, 0.4);
				border-radius: 20rpx;
				padding: 0 8rpx;
			}

		}

		// font weight bold表示加粗
		.item-right {

			// display: flex;//指定flex布局
			// flex-direction: column; //垂直排布  
			justify-content: space-between; //两端对齐
			height: 160rpx;
			padding-top: 5rpx;
			padding-left: 5rpx;

			.title {
				max-width: 365rpx;
				height: 70rpx;
				line-height: 35rpx;
				font-size: 28rpx;
				font-weight: bold;
				// 显示两行，超出的部分省略号显示
				overflow: hidden;
				text-overflow: ellipsis; //省略号
				-webkit-line-clamp: 1; //最多显示两行
				display: -webkit-box; //弹性的计算有多少行
				-webkit-box-orient: vertical; //排列方式纵向排列
				white-space: normal; //文本自动处理换行
			}

			.info {
				.nickName {
					font-size: 23rpx;
					color: #999;

				}

				// align-items: center;垂直居中
				.count {
					display: flex;
					align-items: center; //上下居中
					.iconfont {
						font-size: 23rpx;
						color: #222222;
					}
					.money {
						// color: $mxg-color-orange;
						width: 120rpx;
						font-size: 28rpx;
						padding-right: 30rpx;

					}
				}
			}
		}
	}
</style>

